<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.71</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="350"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Font settings ---
        // Using a font that resembles the hand-drawn style in the image
        const handwrittenFont = '"Comic Sans MS", cursive, sans-serif';
        const captionFont = '"Times New Roman", Times, serif';
        
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // --- Coordinate and Size Definitions ---
        const y_top = 110;
        const y_bottom = 210;

        // Source element
        const x_source = 120;
        const y_source_center = 160;
        const r_source = 35;

        // Box element
        const box_size = 70;
        const x_box_start = 240;
        const y_box_center = y_top;
        const x_box_center = x_box_start + box_size / 2;
        const y_box_top = y_box_center - box_size / 2;
        const x_box_end = x_box_start + box_size;

        // Output terminals
        const x_output = 420;
        const r_terminal = 5;

        // --- Drawing Wires ---
        ctx.beginPath();
        // Bottom common wire
        ctx.moveTo(x_source, y_bottom);
        ctx.lineTo(x_output, y_bottom);

        // Top wire segments
        ctx.moveTo(x_source, y_top);
        ctx.lineTo(x_box_start, y_top);
        ctx.moveTo(x_box_end, y_top);
        ctx.lineTo(x_output, y_top);

        // Vertical wire for the source
        ctx.moveTo(x_source, y_top);
        ctx.lineTo(x_source, y_source_center - r_source);
        ctx.moveTo(x_source, y_source_center + r_source);
        ctx.lineTo(x_source, y_bottom);
        
        // Vertical wire for the box
        ctx.moveTo(x_box_center, y_box_top + box_size);
        ctx.lineTo(x_box_center, y_bottom);

        ctx.stroke();

        // --- Drawing Components ---

        // Source (circle)
        ctx.beginPath();
        ctx.arc(x_source, y_source_center, r_source, 0, 2 * Math.PI);
        ctx.stroke();

        // Box (square)
        ctx.strokeRect(x_box_start, y_box_top, box_size, box_size);

        // Output Terminals (small circles)
        ctx.beginPath();
        ctx.arc(x_output, y_top, r_terminal, 0, 2 * Math.PI);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.arc(x_output, y_bottom, r_terminal, 0, 2 * Math.PI);
        ctx.stroke();

        // --- Drawing Labels ---

        // Source label "e_i"
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const mainFontSize = 28;
        const subFontSize = 18;
        
        ctx.font = `italic ${mainFontSize}px ${handwrittenFont}`;
        const e_metrics = ctx.measureText('e');
        ctx.fillText('e', x_source - e_metrics.width / 3, y_source_center);
        
        ctx.font = `italic ${subFontSize}px ${handwrittenFont}`;
        ctx.fillText('i', x_source + e_metrics.width / 2 + 3, y_source_center + 8);
        
        // Box label "?"
        ctx.font = `bold ${mainFontSize + 15}px ${handwrittenFont}`;
        ctx.fillText('?', x_box_center, y_box_center + 4); // +4 for better vertical centering

        // Output label "e"
        ctx.font = `italic ${mainFontSize-2}px ${handwrittenFont}`;
        ctx.textAlign = 'left';
        ctx.fillText('e', x_output + r_terminal + 10, y_top);

        // Caption "Fig. 3.71"
        ctx.font = `bold 20px ${captionFont}`;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 3.71', canvas.width / 2, y_bottom + 60);

    </script>
</body>
</html>